<template>
  <div class="app_body">
    <GlobalHeader :navData="testNavData"></GlobalHeader>
    <img alt="Vue logo" src="./assets/logo.png" />
    <JForm @submitform="toSubmit">
      <JFormItem :rules="emailRules" v-model="emailText" placeholder="请输入邮箱" :lable="'邮箱'"></JFormItem>
      <JFormItem :rules="passwordRules" v-model="passwordText" placeholder="请输入密码" :lable="'密码'" type="password"></JFormItem>
      <template #Footer>
        <!-- 插槽就是使用 v-slot 来使用 也可以简写成 # vantUI 就是这样写的 -->
        <button class="defaultBtn primary danger">立即登录</button>
      </template>
    </JForm>
    {{emailText}}
    
    <collumList :list="list"></collumList>
  </div>
  
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import 'bootstrap/dist/css/bootstrap.min.css'
import collumList,{ColumnProps} from "./components/collumList.vue"
import GlobalHeader,{NavProps} from './components/globalHeader/globalHeader.vue'
import JForm from './components/form/Jfrom.vue'
import JFormItem,{RulesProp} from './components/form/JFormItem.vue'

// script标签中组件外定义的数据 必须在setup函数中 return 出去 html才能够正常的使用数据
const testData:ColumnProps[] = [
  {
    id:1,
    title:'test1的专栏',
    description:'这是test1的专栏，是一个非常有意思的简介，可以欣赏一下',
    avatar:''
  },
  {
    id:2,
    title:'test2的专栏',
    description:'这是test1的专栏，是一个非常有意思的简介，可以欣赏一下',
    avatar:'http://39.96.42.170/small.png'
  },
  {
    id:3,
    title:'test3的专栏',
    description:'这是test1的专栏，是一个非常有意思的简介，可以欣赏一下',
    avatar:'http://39.96.42.170/small.png'
  },
  {
    id:3,
    title:'test3的专栏',
    description:'这是test1的专栏，是一个非常有意思的简介，可以欣赏一下',
    avatar:'http://39.96.42.170/small.png'
  },
  {
    id:3,
    title:'test3的专栏',
    description:'这是test1的专栏，是一个非常有意思的简介，可以欣赏一下',
    avatar:'http://39.96.42.170/small.png'
  },
  {
    id:3,
    title:'test3的专栏',
    description:'这是test1的专栏，是一个非常有意思的简介，可以欣赏一下',
    avatar:'http://39.96.42.170/small.png'
  },
]
const testNavData:NavProps = {
  isLogin:true,
  username:'Jimmy'
}

export default defineComponent({
  name: "App",
  components: {
    collumList,
    GlobalHeader,
    JFormItem,
    JForm
  },
  setup(props,context){
    const emailText = ref('1002661758')
    const passwordText = ref('1002661758')
    const emailRules:RulesProp = [
      {type:'require',message:'电子邮箱不能为空哦'},
      {type:'email',message:'请输入正确的电子邮箱'}
    ]
    const passwordRules:RulesProp = [
      {type:'require',message:'密码不能为空哦'},
    ]
    const toSubmit = (e:boolean)=>{
      // console.log('接到组件传值',e)
    }
    return {
      list:testData,
      testNavData,
      emailRules,
      emailText,
      toSubmit,
      passwordRules,
      passwordText
    }
  }
});
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  // margin-top: 60px;
}
.app_body{
  background-color: rgb(251, 251, 251);
}
</style>
